<template>
	<view class="earlyWarning">
		<view class="" style="height: 160rpx;">
			<view class="mail_List fixed z_ninetynine">
				<view class="mail" style="font-weight: 700;">
					<view class="order">行车缴费</view>
				</view>
			</view>
			<view class="icon fixed z_ninetynine">
				<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
			</view>

		</view>
		<view class="card">
			<uni-card class="second_card" style="margin: 0;">
				<u-form :model="form" ref="uForm">
					<u-form-item label="选择小区:" :border-bottom="false">
						<u-input v-model="form.address" :type="newList2==''? 'select' : 'text'" :select-open="show2"
							placeholder-style="color: #cccccc; text-align: right;"
							:placeholder="newList2==''? '请输入选择小区': newList2" @click="show2 = true" />
					</u-form-item>
				</u-form>
				<u-select v-model="show2" mode="single-column" :list="list2" @confirm="confirm2"></u-select>
			</uni-card>
		</view>
		<view class="box">
			<view class="paymentDetails" v-for="(item,index) in fee" @click="payment(item.communityId,item.logId,item.payStatus)">
				<view class="paymentDetails_top">
					<view class="" style="font-size: 36rpx; color: #FFFFFF;">
						{{item.plateNo}}
					</view>
					<view class="" style="color: #d63030;">
						{{item.payStatus=='0'? '未支付' : '已付'}}
					</view>
				</view>
				<view class="paymentDetails_bottom">
					<view class="" style="color: #FFFFFF;">
						<!-- 缴费: ¥8 -->
					</view>
					<view class="" style="color: #2fd8c4;">
						{{item.inoutTime}}
					</view>
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<u-toast ref="uToast" />
<!-- <button class='login-but'  open-type="getUserInfo" @getuserinfo="wechatLogin"><text>微信用户快捷登录</text></button>		 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// form表单
				form: {
					// 选择小区
					address: '',
					address_two: ''
				},
				show2: false,
				// 选择小区
				list2: [{
						value: '1',
						label: ''
					},
					{
						value: '2',
						label: ''
					}
				],
				// 选择小区
				newList2: '',
				code:'',
				loginId: '',
				// 车牌号
				plateNo: '',
				fee:''
			}
		},
		onLoad() {
			// 展示全部数据
			this.getRecords()
			wx.login({
				success: (res) => {
					if (res.code) {
						//微信登录成功 已拿到code  
							this.code=res.code 
							console.log(res)
					} else {
						console.log('登录失败！' + res.errMsg)
					}
				} 
			});
			// 获取停车缴费列表数据
			this.parkingFee()
		},
		methods: {
			// 展示小区数据
			getRecords() {
				this.loginId = uni.getStorageSync("setModel")
				this.plateNo = uni.getStorageSync("plantNo")
				this.$http.get('informationInquiry/selectCommunity', {
					deptId: this.loginId.deptId
				}).then(res => {
					let lists = res.data
					this.list2 = this.changeKey(lists, ['value', 'label', 'label', 'label', 'label', 'label',
						'label', 'label'
					]);
				})
			},
			// 获取停车缴费列表数据
			parkingFee() {
				this.$http.get('Driver/selectDrivingRecord', {
					deptId: this.loginId.deptId,
					plateNo: this.plateNo
				}).then(res => {
					console.log(res)
					this.fee=res.data
				})
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			// 选择小区
			confirm2(e) {
				// console.log(e);
				this.form.address = e[0].label
				this.form.address_two = e[0].value
				// if (this.form.address_two != '' && this.form.address_two != '') {
				// 	// // 展示全部列表数据
					this.Approved()
				// }
				// 选择小区
				// this.cellAddress();
			},
			// 展示全部列表数据
			Approved() {
				this.$http.get('ToPay/WeChatAuthorization', {
					communityId: this.form.address_two,
					userName:this.loginId.userName,
					code: this.code
				}).then(res => {
					console.log(res, '展示全部列表数据')
					// this.particulars = res.data
				})
			},
			changeKey(lists, key) {
				let newArr = [];
				lists.forEach((item) => {
					let newObj = {};
					for (var i = 0; i < key.length; i++) {
						newObj[key[i]] = item[Object.keys(item)[i]]
					}
					newArr.push(newObj);
				})
				return newArr;
			},
			payment(communityId,logId,payStatus) {
				if (payStatus==1) {
					this.$refs.uToast.show({
						title: '未查询到停车进场信息，请联系管理员',
					})
				} else {
					this.openUrl(`/pagesB/my/drivingPayment/orderDetails/orderDetails?communityId=${communityId}&logId=${logId}`)
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.earlyWarning {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #f2f2f2;
				font-size: 40rpx;
				background-color: #2e576f;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 18rpx;
			left: 20rpx;
		}

		/deep/.second_card {

			.uni-card {
				z-index: unset;
				margin: 0;
			}

			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 18rpx 32rpx;
			}

			.uni-card__content {
				padding: 0 24rpx !important;
			}
		}

		/deep/.card {

			u-form-item {
				margin: 0 56rpx;
				.u-form-item {
					padding: 0;
				}

				.u-input {
					input {
						text-align: right !important;
					}

				}
			}

			.u-form-item--left {
				flex: unset !important;
				width: unset !important;
			}
		}

		/deep/.card {
			u-form-item {
				.u-input {
					input {
						text-align: right !important;
					}

				}
			}
		}

		.box {
			// display: flex;
			width: 96%;
			// height: 230rpx;
			margin: 0 auto;
			border-radius: 10rpx;

			// background-color: #c5c5c5;
			.paymentDetails {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 100%;
				height: 122rpx;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				background-image: linear-gradient(to right, #2fd8c4, #fefffe);

				.paymentDetails_top {
					display: flex;
					justify-content: space-between;
				}

				.paymentDetails_bottom {
					display: flex;
					justify-content: space-between;
				}
			}

			.paymentDetails_two {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 100%;
				height: 122rpx;
				padding: 0 30rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				background-image: linear-gradient(to right, #2fd8c4, #fefffe);

				.paymentDetails_top {
					display: flex;
					justify-content: space-between;
				}

				.paymentDetails_bottom {
					display: flex;
					justify-content: space-between;
				}
			}

			.paymentDetails_three {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 100%;
				height: 122rpx;
				padding: 0 30rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				background-image: linear-gradient(to right, #2fd8c4, #fefffe);

				.paymentDetails_top {
					display: flex;
					justify-content: space-between;
				}

				.paymentDetails_bottom {
					display: flex;
					justify-content: space-between;
				}
			}

			.paymentDetails_four {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 100%;
				height: 122rpx;
				padding: 0 30rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				background-image: linear-gradient(to right, #2fd8c4, #fefffe);

				.paymentDetails_top {
					display: flex;
					justify-content: space-between;
				}

				.paymentDetails_bottom {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>
